<template>
  <view class="booking-form">
    <view class="form-group">
      <view class="form-title">预约信息</view>
      
      <!-- 日期选择 -->
      <view class="form-item">
        <text class="label">婚礼日期</text>
        <picker mode="date" :value="formData.date" start="2024-01-01" @change="handleDateChange">
          <view class="picker-value">{{ formData.date || '请选择日期' }}</view>
        </picker>
      </view>

      <!-- 时间段选择 -->
      <view class="form-item">
        <text class="label">时间段</text>
        <picker :range="timeSlots" :value="timeSlotIndex" @change="handleTimeChange">
          <view class="picker-value">{{ formData.timeSlot || '请选择时间段' }}</view>
        </picker>
      </view>

      <!-- 预计人数 -->
      <view class="form-item">
        <text class="label">预计人数</text>
        <input type="number" v-model="formData.guestCount" placeholder="请输入预计参加人数" />
      </view>
    </view>

    <view class="form-group">
      <view class="form-title">联系人信息</view>
      
      <!-- 姓名 -->
      <view class="form-item">
        <text class="label">联系人</text>
        <input type="text" v-model="formData.name" placeholder="请输入姓名" />
      </view>

      <!-- 手机号 -->
      <view class="form-item">
        <text class="label">手机号</text>
        <input type="number" v-model="formData.phone" placeholder="请输入手机号" maxlength="11" />
      </view>

      <!-- 备注 -->
      <view class="form-item">
        <text class="label">备注信息</text>
        <textarea v-model="formData.remarks" placeholder="请输入其他需求" />
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn" @tap="submitBooking">提交预约</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const timeSlots = ['上午场 (9:00-12:00)', '下午场 (13:00-16:00)', '晚场 (17:00-20:00)']
const timeSlotIndex = ref(0)

const formData = ref({
  date: '',
  timeSlot: '',
  guestCount: '',
  name: '',
  phone: '',
  remarks: ''
})

// 处理日期选择
const handleDateChange = (e) => {
  formData.value.date = e.detail.value
}

// 处理时间段选择
const handleTimeChange = (e) => {
  timeSlotIndex.value = e.detail.value
  formData.value.timeSlot = timeSlots[e.detail.value]
}

// 提交预约
const submitBooking = () => {
  // 表单验证
  if (!formData.value.date) {
    uni.showToast({ title: '请选择婚礼日期', icon: 'none' })
    return
  }
  if (!formData.value.timeSlot) {
    uni.showToast({ title: '请选择时间段', icon: 'none' })
    return
  }
  if (!formData.value.name) {
    uni.showToast({ title: '请输入联系人姓名', icon: 'none' })
    return
  }
  if (!formData.value.phone) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }

  // 提交预约信息
  uni.showLoading({ title: '提交中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ 
      title: '预约成功',
      icon: 'success',
      success: () => {
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }
    })
  }, 1500)
}
</script>

<style scoped>
.booking-form {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form-group {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.form-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #333;
}

input, .picker-value {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  height: 160rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.picker-value {
  line-height: 80rpx;
  color: #666;
}

.submit-btn {
  background-color: #ff4d4f;
  color: #fff;
  text-align: center;
  padding: 30rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  margin-top: 60rpx;
}
</style> 